<template>
  <div class="generation-stats">
    <div class="task-list">
   <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>任务列表</span>
            <div class="header-actions">
              <el-button type="primary" @click="refreshTasks" :loading="loading">
                <el-icon>
                  <Refresh />
                </el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column
          label="报表级别"
          align="center"
          prop="examName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="学校"
          align="center"
          prop="schoolName"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            联考留痕
          </template>
        </el-table-column>

        <el-table-column
          label="生成时间"
          align="center"
          prop="createdTime"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="状态"
          align="center"
          prop="name"
          :show-overflow-tooltip="true"
        >
            <template slot-scope="scope">
                <el-tag >
                    {{ scope.row.generatedNum }} / {{ scope.row.totalNum }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-popconfirm
            @confirm="handleDelete(scope.row)"
              title="确定删除本条留痕记录吗？"
            >
            <el-link type="danger" slot="reference">删除</el-link>
          </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
         <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-card>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="450px  "
      :before-close="handleClose">
      <div style="padding:0 20px">
      <div style="display: flex;line-height: 30px;">
        <div>分析内容：</div>
        <el-checkbox-group v-model="checkedAnalysis">

          <el-checkbox label="上线分析">上线分析</el-checkbox>
          <el-checkbox label="成绩分析">成绩赋分</el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="display: flex;margin-top: 20px;line-height: 30px;">
        <div>生成形式：</div>
        <el-checkbox-group v-model="checkedGenerate">

          <el-checkbox label="成绩分析">成绩分析</el-checkbox>
          <el-checkbox label="PDF分析">PDF分析</el-checkbox>
          <el-checkbox label="卷面留痕">卷面留痕</el-checkbox>
        </el-checkbox-group>
      </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="generateType==0" type="primary" @click="dialogVisible = false">生成</el-button>
        <el-button v-if="generateType==1" type="danger" @click="dialogVisible = false">重新生成</el-button>
        <el-button type="info" @click="dialogVisible = false">返回</el-button>
      </span>
    </el-dialog>
    <div class="page-bottom">
      <div class="sel-box">
        <el-button @click="startGenerate" type="primary">开始生成</el-button>
        <!-- <el-button @click="reGenerate" type="primary">全部重新生成</el-button> -->
        <!-- <el-button type="danger">删除结果</el-button> -->
      </div>
      <!-- <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash';
import { getRecordList,deleteRecord,generateMarkingReport } from '@/api/xmgl/cjgl';

export default {
  props: {
    xmxx: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      loading: false,
      activeName: "",

      tableData: [],
      timer: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogTitle: "",
      dialogVisible: false,
      generateType: 0, // 0 生成 1 重新生成
      checkedAnalysis: [],// 分析内容
      checkedGenerate: [],// 生成形式
      multipleSelection: [],
      multiple: true,

    };
  },
  created() {
    console.log(this.activeName);
      this.activeName = this.activeName?this.activeName:'cjfx';
    

    this.getList();
  },

  methods: {
    endTime() {
      clearInterval(this.timer);
      this.timer = null;
    },
    startTime() {
      this.timer = setInterval(() => {
        // 调用查询进度接口
        // 更新进度，有100%的判断是否全部完成 调用 this.endTime();
      }, 3000);
    },
    // 刷新任务列表
     refreshTasks(){
        this.getList()
    },
       handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.getList()
    },
    // 分页相关
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.getList()
    },
    handleDelete(row){
      deleteRecord(row.id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
          });
          this.refreshTasks();
        }
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error',
        });
      })
    },  

    getList:debounce(function() {

      // this.activeName = this.active  Name?this.activeName:'cjfx';

      this.loading = true;
      getRecordList({examId:this.xmxx.id,...this.queryParams}).then(res => {


        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      }).finally(() => {
        this.loading = false;
      })
    }, 200),
    activeChange() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.getList();
    },

    cxsc(row) {
      // 重新生成后  调用this.startTime()
    },
    handleClose() {
      this.dialogVisible = false;
      this.generateType = 0;
    },
    startGenerate() {
      this.$confirm(`是否生成有痕阅卷？`, '卷面留痕', {
           confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          generateMarkingReport({
              examId: this.xmxx.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '分析成功'
                });
                this.getList();
              }
            })
        });

    },
    reGenerate() {
      this.dialogTitle = "全部重新生成";
      this.dialogVisible = true;
      this.generateType = 1;
    },
handleSelectionChange(selection) {
      console.log(selection, "selection");

      this.multipleSelection = selection;
      this.multiple = !selection.length;
    },
  },

  beforeDestroy() {
    if (this.timer) {
      this.endTime();
    }
  },
};
</script>

<style scope>
.generation-stats {
  padding: 20px;
}
.task-list {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>